<script setup lang="ts">
import { Question } from '@/api/subject/type';
import { showToast } from 'vant';
import { ref } from 'vue';

const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
    }
});

const question = ref({} as Question);
const emit = defineEmits(["submit"]);
const isMultipleChoice = ref(false);
const options = ref(['', '']);
const correctAnswers = ref<boolean[]>([]);

const addOption = () => {
    options.value.push('');
    correctAnswers.value.push(false);
}

const removeOption = (index: number) => {
    if (options.value.length <= 2) {
        showToast('至少需要2个选项');
        return;
    }
    
    options.value.splice(index, 1);
    correctAnswers.value.splice(index, 1);
}

const submit = () => {
    if (!question.value.title || !question.value.title.trim()) {
        showToast('题目描述不能为空');
        return;
    }
    
    if (options.value.length < 2) {
        showToast('请至少添加2个选项');
        return;
    }
    
    if (options.value.some((opt) => !opt.trim())) {
        showToast('选项内容不能为空');
        return;
    }
    
    // 获取正确答案的索引数组
    const correctIndices = correctAnswers.value
        .map((isCorrect, index) => isCorrect ? index : -1)
        .filter(index => index !== -1);
    
    if (correctIndices.length === 0) {
        showToast('请至少选择一个正确答案');
        return;
    }
    
    if (!isMultipleChoice.value && correctIndices.length > 1) {
        showToast('单选题只能选择一个正确答案');
        return;
    }
    
    question.value.type = 'Choice';
    question.value.answer = JSON.stringify({
        isMultiple: isMultipleChoice.value,
        options: options.value,
        correctAnswer: correctIndices
    });
    
    emit('submit', question.value);
}

// 初始化正确答案数组
options.value.forEach(() => {
    correctAnswers.value.push(false);
});

const toggleSingleAnswer = (index: number) => {
    if (props.disabled) return;
    
    // 单选逻辑
    correctAnswers.value = correctAnswers.value.map((_, i) => i === index);
}

const toggleMultipleAnswer = (index: number) => {
    if (props.disabled) return;
    
    // 多选逻辑
    correctAnswers.value[index] = !correctAnswers.value[index];
}
</script>

<template>
    <div class="choice-question-form" :class="{ 'is-disabled': disabled }">
        <div class="form-section">
            <h3 class="section-title">题目内容</h3>
            
            <div class="question-content">
                <van-field
                    v-model="question.title"
                    placeholder="请输入题目描述"
                    type="textarea"
                    rows="4"
                    maxlength="1000"
                    show-word-limit
                    :disabled="disabled"
                    :rules="[{ required: true, message: '请填写题目描述' }]"
                />
            </div>
            
            <div class="question-type">
                <span class="type-label">题目类型:</span>
                <van-radio-group v-model="isMultipleChoice" direction="horizontal" :disabled="disabled">
                    <van-radio :name="false">单选题</van-radio>
                    <van-radio :name="true">多选题</van-radio>
                </van-radio-group>
            </div>
        </div>
        
        <div class="form-section">
            <div class="section-header">
                <h3 class="section-title">选项内容</h3>
                <van-button 
                    size="small" 
                    type="primary" 
                    icon="plus" 
                    @click="addOption"
                    :disabled="options.length >= 6 || disabled"
                >
                    添加选项
                </van-button>
            </div>
            
            <div class="options-list">
                <div 
                    v-for="(option, index) in options" 
                    :key="index" 
                    class="option-item"
                >
                    <div class="option-header">
                        <div class="option-label">选项 {{ String.fromCharCode(65 + index) }}</div>
                        <van-button 
                            size="mini" 
                            type="danger" 
                            @click="removeOption(index)"
                            :disabled="options.length <= 2 || disabled"
                        >
                            删除
                        </van-button>
                    </div>
                    
                    <div class="option-content">
                        <van-field
                            v-model="options[index]"
                            placeholder="请输入选项内容"
                            :disabled="disabled"
                        />
                    </div>
                </div>
            </div>
        </div>
        
        <div class="form-section">
            <h3 class="section-title">正确答案</h3>
            
            <div class="answer-selector">
                <template v-if="isMultipleChoice">
                    <div 
                        v-for="(option, index) in options" 
                        :key="index"
                        class="answer-option"
                        :class="{ 
                            'is-correct': correctAnswers[index],
                            'is-disabled': disabled 
                        }"
                        @click="toggleMultipleAnswer(index)"
                    >
                        <div class="answer-checkbox">
                            <van-icon 
                                :name="correctAnswers[index] ? 'success' : 'circle'" 
                                :color="correctAnswers[index] ? '#4080ff' : '#dcdfe6'"
                            />
                        </div>
                        <div class="answer-text">
                            <span class="answer-letter">{{ String.fromCharCode(65 + index) }}.</span>
                            <span class="answer-content">{{ option || '(空选项)' }}</span>
                        </div>
                    </div>
                    <div class="answer-tip">
                        <van-icon name="info-o" />
                        <span>点击选项可选择多个正确答案</span>
                    </div>
                </template>
                
                <template v-else>
                    <div 
                        v-for="(option, index) in options" 
                        :key="index"
                        class="answer-option"
                        :class="{ 
                            'is-correct': correctAnswers[index],
                            'is-disabled': disabled 
                        }"
                        @click="toggleSingleAnswer(index)"
                    >
                        <div class="answer-radio">
                            <van-icon 
                                :name="correctAnswers[index] ? 'checked' : 'circle'" 
                                :color="correctAnswers[index] ? '#4080ff' : '#dcdfe6'"
                            />
                        </div>
                        <div class="answer-text">
                            <span class="answer-letter">{{ String.fromCharCode(65 + index) }}.</span>
                            <span class="answer-content">{{ option || '(空选项)' }}</span>
                        </div>
                    </div>
                    <div class="answer-tip">
                        <van-icon name="info-o" />
                        <span>单选题只能有一个正确答案</span>
                    </div>
                </template>
            </div>
        </div>
        
        <div class="form-actions">
            <van-button 
                type="primary" 
                block 
                round 
                @click="submit"
                :disabled="disabled"
                :loading="disabled"
                loading-text="提交中"
            >
                提交
            </van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.choice-question-form {
    &.is-disabled {
        opacity: 0.8;
        pointer-events: none;
    }
    
    .form-section {
        margin-bottom: 24px;
        
        .section-title {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
            margin: 0 0 16px 0;
        }
        
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .question-type {
            display: flex;
            align-items: center;
            margin-top: 16px;
            
            .type-label {
                margin-right: 12px;
                color: #606266;
            }
        }
    }
    
    .options-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
        
        .option-item {
            background-color: #f5f7fa;
            border-radius: 8px;
            padding: 12px;
            
            .option-header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 8px;
                
                .option-label {
                    font-weight: 500;
                    color: #606266;
                }
            }
            
            .option-content {
                .van-field {
                    background-color: transparent;
                    padding: 0;
                }
            }
        }
    }
    
    .answer-selector {
        .answer-option {
            display: flex;
            align-items: center;
            padding: 12px;
            border: 1px solid #ebeef5;
            border-radius: 8px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.2s;
            
            &:hover:not(.is-disabled) {
                border-color: #c6e2ff;
                background-color: #f0f9ff;
            }
            
            &.is-correct {
                border-color: #4080ff;
                background-color: #ecf5ff;
            }
            
            .answer-checkbox, .answer-radio {
                margin-right: 12px;
            }
            
            .answer-text {
                display: flex;
                align-items: center;
                
                .answer-letter {
                    font-weight: 500;
                    margin-right: 8px;
                    width: 20px;
                }
                
                .answer-content {
                    color: #606266;
                }
            }
        }
        
        .answer-tip {
            display: flex;
            align-items: center;
            gap: 6px;
            color: #909399;
            font-size: 13px;
            margin-top: 8px;
        }
    }
    
    .form-actions {
        margin-top: 32px;
        
        .van-button {
            height: 44px;
            font-size: 16px;
        }
    }
}
</style>